<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <link rel="stylesheet" href="css/datepicker.css" />
    <link rel="stylesheet" href="css/index.css" />
    <link rel="stylesheet" href="css/common.css" />
    <title>主页面</title>
  </head>
  <body>
    <!-- 左侧固定，右侧自适应 -->
    <div id="main">
      <div class="left">左栏</div>
      <div class="right">
        <div class="co-tab co-font wt-tab">
          <span>统计看板</span>
          <span class="co-font wt-tab-export">导出表格</span>
        </div>

        <!-- 提问量板块 -->
        <div class="co-comp">
          <div class="co-comp-header co-comp-header-line">
            <div class="co-tab co-font comp-header-tag">提问量</div>
            <div class="comp-header-content">
              <ul class="co-li-notype co-font">
                <li>今日</li>
                <li>本周</li>
                <li>本月</li>
              </ul>

              <div class="c-datepicker-date-editor J-datepicker-range-day">
                <input
                  placeholder="开始日期"
                  name=""
                  class="c-datepicker-data-input only-date"
                  value=""
                />
                <span class="c-datepicker-range-separator">~</span>
                <input
                  placeholder="结束日期"
                  name=""
                  class="c-datepicker-data-input only-date"
                  value=""
                />
                <i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
              </div>

              <p class="header-content-detail">
                <a href=""
                  ><span>查看详情</span>
                  >
                </a>
              </p>
            </div>
          </div>
          <div class="co-comp-body co-comp-layout">
            <div class="con-answer" style="width: 50%; height: 300px"></div>
            <div class="con-ask" style="width: 50%; height: 300px"></div>
          </div>
        </div>

        <!-- 常见问题访问量板块 -->
        <div class="co-comp comp-height-study">
          <div class="co-comp-header co-comp-header-line">
            <div class="co-tab co-font comp-header-tag">常见问题访问量</div>
            <div class="comp-header-content">
              <ul class="co-li-notype co-font">
                <li>今日</li>
                <li>本周</li>
                <li>本月</li>
              </ul>
              <div class="content-rilicomp">
                <!-- 日历组件 -->
              </div>
              <p class="header-content-detail">
                <a href=""
                  ><span>查看详情</span>
                  >
                </a>
              </p>
            </div>
          </div>
          <div class="co-comp-body co-comp-layout">
            <div class="con-always" style="width: 1000px; height: 267px"></div>
            <div class="con-always-body">
              <p>
                提问关键字排名<a href=""><span>更多 ></span></a>
              </p>
              <ul class="co-li-notype">
                <li>
                  <a href="">
                    <p class="body-tag active">1</p>
                    钢铁是怎样炼成的 <span>323,234</span>
                  </a>
                </li>
                <li>
                  <a href="">
                    <p class="body-tag active">2</p>
                    钢铁是怎样炼成的 <span>323,234</span>
                  </a>
                </li>
                <li>
                  <a href="">
                    <p class="body-tag active">3</p>
                    钢铁是怎样炼成的 <span>323,234</span>
                  </a>
                </li>
                <li>
                  <a href="">
                    <p class="body-tag">4</p>
                    钢铁是怎样炼成的 <span>323,234</span>
                  </a>
                </li>
                <li>
                  <a href="">
                    <p class="body-tag">5</p>
                    钢铁是怎样炼成的 <span>323,234</span>
                  </a>
                </li>
                <li>
                  <a href="">
                    <p class="body-tag">6</p>
                    钢铁是怎样炼成的 <span>323,234</span></a
                  >
                </li>
                <li>
                  <a href="">
                    <p class="body-tag">7</p>
                    钢铁是怎样炼成的 <span>323,234</span>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>

        <!-- 视频观看统计板块 -->
        <div class="co-comp comp-height-study">
          <div class="co-comp-header">
            <div class="co-tab co-font comp-header-tag">视频观看统计</div>
            <div class="comp-header-content">
              <ul class="co-li-notype co-font">
                <li>今日</li>
                <li>本周</li>
                <li>本月</li>
              </ul>
              <div class="content-rilicomp">
                <!-- 日历组件 -->
              </div>
              <p class="header-content-detail">
                <a href=""
                  ><span>查看详情</span>
                  >
                </a>
              </p>
            </div>
          </div>
          <div class="co-comp-body co-comp-layout">
            <div class="con-watch" style="width: 540px; height: 267px"></div>
            <div class="con-watch-info">
              <div class="con-info-1" style="width: 280px; height: 267px"></div>
              <div class="con-info-2" style="width: 280px; height: 267px"></div>
            </div>
          </div>
        </div>

        <!-- 测试板块 -->
        <div class="co-comp comp-height-test">
          <div class="co-comp-header">
            <div class="co-tab co-font comp-header-tag">测试</div>
            <div class="comp-header-content">
              <ul class="co-li-notype co-font">
                <li>今日</li>
                <li>本周</li>
                <li>本月</li>
              </ul>
              <div class="content-rilicomp">
                <!-- 日历组件 -->
              </div>
              <p class="header-content-detail">
                <a href=""
                  ><span>查看详情</span>
                  >
                </a>
              </p>
            </div>
          </div>
          <div class="co-comp-body">
            <div class="con-test" style="width: 100%; height: 267px"></div>
            <div class="down-content">
              <div class="con-rigester" style="width: 50%; height: 267px"></div>
              <div class="con-xuzhan" style="width: 50%; height: 267px"></div>
            </div>
          </div>
        </div>

        <!-- 学习资料板块 -->
        <div class="co-comp comp-height-study">
          <div class="co-comp-header co-comp-header-line">
            <div class="co-tab co-font comp-header-tag">学习资料</div>
            <div class="comp-header-content">
              <ul class="co-li-notype co-font">
                <li>今日</li>
                <li>本周</li>
                <li>本月</li>
              </ul>
              <div class="content-rilicomp">
                <!-- 日历组件 -->
              </div>
              <p class="header-content-detail">
                <a href=""
                  ><span>查看详情</span>
                  >
                </a>
              </p>
            </div>
          </div>
          <div class="co-comp-body co-comp-layout">
            <div class="con-study" style="width: 70%; height: 267px"></div>
            <div class="co-cont-layout co-layout-left1">
              <div class="cont-layout-cont">
                <p class="co-font">课程查看次数</p>
                <p>1876</p>
              </div>
              <div class="cont-layout-cont">
                <p class="co-font">企业数量</p>
                <p>522</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 活动与通知板块 -->
        <div class="co-comp-layout">
          <div class="co-comp-tab comp-height-study">
            <div class="co-comp-header">
              <div class="co-tab co-font comp-header-tag">活动</div>
              <p class="header-content-detail detail-margin">
                <a href=""
                  ><span>查看详情</span>
                  >
                </a>
              </p>
            </div>
            <div class="co-comp-body co-comp-layout">
              <div class="con-active" style="width: 550px; height: 267px"></div>
            </div>
          </div>

          <div class="co-comp-tab comp-height-study">
            <div class="co-comp-header">
              <div class="co-tab co-font comp-header-tag">通知</div>
            </div>
            <div class="co-comp-body comp-height-inform">
              <div class="co-cont-layout co-layout-left2">
                <div class="cont-layout-cont">
                  <p class="co-font">发布通知数</p>
                  <p>20</p>
                  <p class="header-content-detail" style="margin-top: 20px">
                    <a href="">
                      <span>查看详情</span>
                    </a>
                  </p>
                </div>
                <div class="cont-layout-cont">
                  <p class="co-font">发布调研数</p>
                  <p>20</p>
                  <p class="header-content-detail" style="margin-top: 20px">
                    <a href="">
                      <span>查看详情</span>
                    </a>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>

  <script src="resources/scripts/jquery-1.7.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.0/dist/echarts.min.js"></script>
  <script src="js/moment.min.js"></script>
  <script src="js/datepicker.all.min.js"></script>
  <script src="js/datepicker.en.js"></script>
  <script src="js/index.js"></script>
  <script src="js/datepicker.js"></script>
</html>
